<template>
  <div class="list-search">
        <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @input="onSearch"
        >
        
            <template #action>
                <div @click="$router.go(-1)">返回</div>
          </template>
        </van-search>
        </form>
  <!-- 这里等下改 -->
  <!-- 10月8号请做这个  影院列表 -->
  <div v-if="showNosearch">
      <van-cell title="离你最近"  class="van-cell-title"/>
      <div class="div-container" v-if="this.list.length>0">
        <button v-for=" (item,index)  in forWardList" :key="item.address+index" class="van-button-css" @click="pushRouter(item.cinemaId)"> {{item.name}}</button>
      </div>
      <div v-else>
          <van-empty image="error" description="无影院信息" />
      </div>
  </div>


  <div v-if="showSearch">
      <van-cell
        v-for="(item, index) in searchList"
        :key="item + index"
        @click="pushRouter(item.cinemaId)"
      >
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <span class="custom-title">{{ item.address }}</span>
        </template>
        <template #default>
          <div class="custom-title">&yen;{{ item.lowPrice / 100 }}起</div>
          <div class="custom-title">距离未知</div>
        </template>
      </van-cell>

</div>


  </div>
</template>

<script>
import cinemaSearch from "../../request-get/search-cinema-list.js"
export default {
  data(){
      return {
            value: '',
            list:[],
            searchList:[],
            showNosearch:true,
            showSearch:false
      }
  },
  computed:{
    forWardList(){
      // 太多了就截取一点点
      if(this.list.length>=6){
          return this.list.splice(0,6)
      }else if(this.list.length>0&&this.list.length<6){
         return this.list
      }
    }
  },
  methods: {
    onSearch(){
        this.searchList.splice(0,this.searchList.length)
        for(let i=0;i<this.list.length;i++){
          // console.log();
          if(this.list[i].name.indexOf(this.value)!=-1 && this.value){
            // console.log(this.list[i].name);
            
            this.searchList.push(this.list[i]);
          }
        }
        this.showNosearch=false;
        this.showSearch=true;
        if(!this.value){
            this.searchList.splice(0,this.searchList.length)
            this.showNosearch=true;
            this.showSearch=false;
        }
    },
    pushRouter(cinemaId){
      this.$store.commit("setCinemaId",cinemaId)
      this.$store.commit("setfilmId",this.$route.query.filmId)
      // console.log(this.$store.state.filmId,"这个filmId是我要看的");
      
      this.$router.push({
        path:"CinemaList",
        query:{
          filmId:this.$route.query.filmId,
          k:Math.random()*1092+2
        }
      });
    }
    
  },
  mounted(){
    cinemaSearch(this.$store.state.cityId).then(res=>{
      // console.log(res);
      this.list=JSON.parse(JSON.stringify(res))
      // console.log(this.list);
      
    })



  }


}
</script>


<style scoped>
.van-cell-title{
  width: 100%;
  font-size: 13px;
  line-height: 13px;
  color: #bdc0c5;
}
.list-search{
  width: 100%
}
/* 中间的居中距离 */
.div-container{
  
  width:80%;
  margin: 0 auto;

}
.van-button-css{
      list-style: none;
      margin-top:10px;
      margin-right: 10px;
      outline: none;
      border: none ;
      text-align: center;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-right: 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font: 12px/1.5 Tahoma,Helvetica,Arial,sans-serif;
}
</style>
